<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
            
        </div>
        <nly-content>
            <div class="task-detail">
                <div class="task-detail-header">账户余额：<span class="balance">{{accountData.balance || "0.00"}} 元</span></div>
                <div class="task-detail-content">
                    <a-row>
                        <a-col :span="4" class="task-detail-item">
                            <sapn class="task-detail-title">坐席总数:</sapn>
                            <sapn class="task-detail-text">{{agentStatistics.totalNumber}}</sapn>
                        </a-col>
                        <a-col :span="4" class="task-detail-item">
                            <sapn class="task-detail-title">有效个数:</sapn>
                            <sapn class="task-detail-text">{{agentStatistics.enableNumber}}</sapn>
                        </a-col>
                        <a-col :span="4" class="task-detail-item">
                            <sapn class="task-detail-title">失效个数:</sapn>
                            <sapn class="task-detail-text">{{agentStatistics.disableNumber}}</sapn>
                        </a-col>
                    </a-row>
                </div>
            </div>
            <div class="box">
                <div class="renwu-from">
                    <div class="renwu-frisht">坐席单价</div>
                    <div class="renwu-secend">{{postData.price}}元/年</div>
                </div>
                <div class="renwu-from">
                    <div class="renwu-frisht">购买个数</div>
                    <div class="renwu-secend"><a-input-number v-model="postData.number" :min="1" :step="1" :precision="0" style="padding-left: 5px;"/> 个</div>
                </div>
                <div class="renwu-from" >
                    <div class="renwu-frisht">总金额</div>
                    <div class="renwu-secend" style="color:#F59A23;font-weight: 700;">{{totalAmount}}元</div>
                </div>
                 <div class="renwu-from" >
                    <div class="renwu-frisht">我已了解</div>
                    <div class="renwu-secend"> <a-checkbox v-model="isAlreadyKnow" style="color:red;">购买坐席的费用直接从账户余额中扣除；购买成功后，工作人员会在1-2个内为你开通</a-checkbox></div>
                </div>
                <div style="margin:20px 0 20px 20%;">
                    <a-button type="primary" @click="handleSubmit">立即购买</a-button>
                </div>
            </div>
                
        </nly-content>
    </nly-content-wrapper>
</template>

<script>
import {  saveAgentOrder} from "@/api/crm/call/agentManage";
import {  getCrmCallAgentStatistics } from "@/api/crm/call/agentStatistcs";
import {  getByCompany } from "@/api/expenses/expensesAccount";

export default {
    data(){
        return{
            accountData: {
                balance: 0.00
            },                    //账户余额
            agentStatistics: {},            //坐席统计
            postData:{
                price: 1800,
                number: null
            },
            // totalAmount: 0.00,              //总金额
            isAlreadyKnow: false,
        };
    },
    activated(){
        this.reloadData();
    },
    computed:{
        totalAmount: function(){
            let {price,number} = this.postData;
            return (price * (number || 0)).toFixed(2);
        }
    },
    methods:{
        reloadData(){
            this.getAccount();
            this.getCrmCallAgentStatistics();
        },
        //获取账户余额
        getAccount(){
            getByCompany().then(response => {
                if (response.code === 200) {
                   this.accountData = response.data;
                   console.log("获取账户余额",this.accountData);
                } 
            });
        },
        //获取当前坐席统计
        getCrmCallAgentStatistics() {
            getCrmCallAgentStatistics().then(response => {
                if (response.code === 200) {
                   this.agentStatistics = response.data || {};
                } 
            });
        },
        //立即购买
        handleSubmit(){
            let _this = this;
            let { postData,totalAmount,isAlreadyKnow,accountData } = this;
            if(!isAlreadyKnow){
                this.$message.warn("请勾选‘我已了解’");
                return;
            }
            if(accountData.balance < totalAmount){
               this.$confirm({
                    title: '提示',
                    okText: "充值",
                    content: <span>账户余额不足，请充值</span>,
                    onOk(){
                       _this.$router.push("/views/call/moneyManage")
                    },
                    onCancel () { },
                });
                return;
            }
             saveAgentOrder(postData).then(response => {
                if (response.code === 200) {
                    Object.assign(this.postData,{number:null});
                    this.isAlreadyKnow = false;
                    this.reloadData();
                    this.$confirm({
                        title: '提示',
                        okText: "订单管理",
                        cancelText:"继续购买",
                        content: <span>提交成功,你可以到订单里查询开通进度</span>,
                        onOk(){
                            _this.$router.push("/views/call/orderManage")
                        },
                        onCancel () { },
                    });
                } 
            });
        },
        onChange(e){
            console.log(`checked = ${e.target.checked}`);
        }
    }
}
</script>

<style lang="less" scoped>
    .box{
        border: 1px solid #e8e8e8;
        margin: 0px 5px 10px 5px;
        padding: 0 20px;
        .renwu-from {
            
         display: flex;
         min-height: 35px;
         line-height: 35px;
         margin-top: 10px;
         .renwu-frisht {
            width: 120px;
         }
         .renwu-secend {
            // width: 350px;
            .play-btns {
                margin-left: 10px;
            }
            .ant-input,.ant-select-selection{
            width: 100%;
            outline: none;
            border: 1px solid #C6C1C1 !important;
            width: 100%;
            }
         }
     }
    }
   
 //任务详情
    .task-detail{
        border: 1px solid #e8e8e8;
        background: #fff;
        border-radius: 2px;
        position: relative;
        box-sizing: border-box;
        color: rgba(0,0,0,.65);
        line-height: 1.5;
        font-size: 14px;
        margin-top:-5px;
        margin: 0px 5px 10px 5px;
        .balance{
            color: #eb3b3b;
        }
        .task-detail-header{
            padding: 14.5px 24px;
            background: #f2f3f5;
            border-bottom: 1px solid #e8e8e8;
            color: rgba(0,0,0,.85);
            min-height: 40px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 2px 2px 0 0;
        }
        .task-detail-content{
            padding: 8px 24px 3px 24px;
            .task-detail-item{
                margin-bottom: 5px;
                .task-detail-title{
                    display: inline-block;
                    width: 60px;
                    margin-right: 8px;
                    color: #7b7979;
                }
            }
        }
    }
</style>